<script lang="ts" setup>
  import { computed } from "vue";

  interface DrawerProps {
    position?: "left" | "right" | "top" | "bottom";
    width?: string | number;
    height?: string | number;
    title?: string;
  }

  const visible = defineModel("visible");

  const props = withDefaults(defineProps<DrawerProps>(), {
    position: "bottom",
    width: "100%",
    height: "auto",
  });

  const classNames = computed(() => {
    return ["umrp-drawer", `umrp-drawer-${props.position}`];
  });

  const closeDrawer = () => {
    visible.value = false;
  };
</script>

<template>
  <div v-if="visible" :class="classNames">
    <div class="mark" @click="closeDrawer"></div>
    <div class="body">
      <slot name="header">
        <div class="umrp-drawer-title" v-if="title">{{ title }}</div>
      </slot>
      <slot></slot>
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .umrp-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;

    &-title {
      padding: 10px 16px;
      text-align: center;
    }

    .mark {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      transition: opacity 0.3s ease;
    }

    &-left {
      top: 0;
      left: 0;
      transform: translateX(-100%);
    }

    &-right {
      .body {
        box-sizing: border-box;
        padding: 16px;
        width: 30%;
        right: 0;
        height: 100vh;
      }
    }

    &-top {
      top: 0;
      left: 0;
      width: 100%;
      transform: translateY(-100%);
    }

    &-bottom {
      bottom: 0;
      left: 0;
      transform: translateY(0%);

      .body {
        border-radius: 10px 10px 0 0;
      }
    }

    .body {
      position: absolute;
      background-color: #fff;
      transition: transform 0.3s ease;
    }

    .body {
      transform: translateX(0);
    }

    // &.umrp-drawer-visible {}
  }
</style>
